<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		body{
			margin:0;
			padding-top:200px;
		}
		div{
			width:200px;
			border:2px dashed #cd0000;
		}
		span{
			padding-top:50%;
			padding-right:50%;
			padding-bottom:50%;
			padding-left:50%;
			background-color: grey;
		}
	</style>
</head>
<body>
	<!-- 1. 换行是因为默认的white-space: normal; padding-left:50%+本行文字的长度超出了div的宽度，文字自动换行，
		 2.文字隐藏是因为换行的文字，保持padding-top:50%;会覆盖前面的渲染 -->
	<div>
		<span>文字文字文字</span>
	</div>
</body>
</html>